<html>  
<head>  
	<title>琢越网</title>   
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!link rel="stylesheet" href="css/mynavbar.css">
	<link rel="stylesheet" href="mystyle.css">

</head> 
	
<body style="background-color:#F7F7F7">
<div class="container" style="width:85%">
	<div class="row clearfix "style="box-shadow: 5px -5px">		
			<nav class="navbar navbar-default navbar-fixed-top " role="navigation" ><!导航栏>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<a class="navbar-brand" href="home.html" style="font-size:28px;color:orange;font-weight:bold;text-indent:100px">琢越</a>
					<ul class="nav navbar-nav">
						<li style="text-indent:20px">
							<a href="home.html">首页</a>
						</li>
						<li style="text-indent:20px">
							<a href="find.html">发现</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right" > <!头像与退出登录按钮（未登录前设其style="dispaly:none"）>
						<li><a href="#" class="img-padding">
							<img alt="140x140" class="img protrait" src="img/man2.png" ></a>
						</li> 
						<li><a href="login.html"style="text-indent:10px;margin-right:100px">退出登录</a></li> 
					</ul>
					<ul class="nav navbar-nav navbar-right"  style="display:none">  <!注册与登录按钮（登录后设其style="dispaly:none"）>
						<li><a href="login.html">登录</a></li> 
						<li><a href="register.html"style="text-indent:10px;margin-right:100px">注册</a></li> 
					</ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="站内搜索">
							<button type="submit" class="btn btn-default btn-sm" onclick="window.open('search.html')" >搜索</button>
						</div> 
					</form>
				</div>
			</nav>
	</div>
		<br></br>
		<br></br>
	<div class="row clearfix">
				<div class="col-md-1 column">  <!次导航>
					<ul class="nav nav-pills">
						<li class="active">
							 <a href="#" >话题</a></li>
						<li>
							 <a href="search-note.html">笔记</a>
						</li>
					</ul>
				</div>
				<div id="middleBox" class="col-md-8 column col-div"> <!搜索结果展示区>
					<!话题展示>
					<div  class="row row-mar-lg clearfix">
						<div class="media" style="margin:10px 10px 5px 10px"> 
							<button type="button" class="btn-xs btn-warning ">Warning</button>
							<button type="button" class="btn-xs btn-warning ">Warning</button>
							<button type="button" class="btn-xs btn-warning ">Warning</button>
							<button type="button" class="btn-xs btn-warning ">Warning</button>					
							<a href="topic.html" target=_blank style="text-decoration:none;color:black;">
								<h4 class="col-h4">xxx怎么看?</h4>
								<p>最近一段时间的【国内音乐app】热歌榜基本听了都想吐，之前有习惯不定期打开热歌榜看到熟悉的歌手就走一波
								，现在早就戒了。为什么这么说，苹果的Apple Music里华语歌排行，看起来大体还是挺正常的。前两年好好的啊，
								即使满大街放，甭管邓紫棋的泡沫也好，还是朴师傅的平凡之路、我本命的小幸运，周董告白气球这些，这里面最
								差的起码还有点营养，最近呢？</p>
							</a>
	
							 <a onclick="collect()" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-star" ></span>收藏
							</a>
							<a onclick="copyUrl()" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-link" >分享
							</a>									
							<a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-exclamation-sign" >举报
							</a>															
							<!举报模态框>
							<div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header"> <!头>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">举报</h4>
										</div>
										<div class="modal-body"> <!中间部分>
											<textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
										</div>
										<div class="modal-footer"> <!脚>
											<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
										</div>
									</div>									
								</div>								
							</div>
							<a role="button" class="but-click btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-pencil" >评论
							</a>							
							<p class="pull-right tool" style="">xxx</p> <!!!>
							<label class="pull-right tool">浏览：</label>
							<p class="pull-right tool">xxx</p> <!!!>
							<label class="pull-right tool">收藏：</label>
							<p class="pull-right tool">用户A</p>
							<a href="#" class="pull-right"><img src="img/2.jpg"  width=40px height=40px/></a>									
						</div>	
						<div  class="remark-div" style="display:none" > <!评论框>
							<textarea class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
							<button type="submit" class="btn btn-default pull-right publish">发表</button>
						</div>
						<hr style="border:1 dashed #987cb9" width="90%"color=#987cb9 SIZE=1>
					</div>	
						
				</div>
				<div class="col-md-3 column"> <!右部分>
					<div class="row clearfix col-div"> <!热搜话题>
						<h4 class="text-center col-h4">热搜话题</h4>
						<hr>					
						<div class="right-div">
							<a href="#" class="right-text">话题1</a>
							<br><a href="#" class="right-text">话题2</a>
						</div>		
					</div>
					<div id="userInformation" class="row row-mar-lg clearfix col-div" >	<!用户搜索结果>
						<h4 class="text-center col-h4">相关用户</h4>	
						<hr>							
						<div class="right-div">
							<img src="img/2.jpg" width=40px height=40px/>
							<a href="#" class="right-text">用户A</a>
							<button class="btn-link pull-right" style="text-decoration:none"><p style="font-size:14px;color:#525252;font-weight:bold">+关注</p></button> 						
						</div>
					</div>
				</div>
	</div>	
</div>
<script>
// -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block"); 
			else
				div.css("display","none"); 
			//div[0].style.display = "block"; //设置div的style为可见
		});	
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value; 
			console.log(comment);
			if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{	
				div.css("display","none"); 
				alert("发表成功!");
			}
		});
	});
	//var collectFlag = 1;
	function collect(){
		alert("收藏成功!")
	/*	if( collectFlag==1){
			
			collectFlag = 2;
		}
		else{
			alert("已取消收藏!")
			collectFlag = 1;
		}
	*/
	}
	function copyUrl()
   {
		var clipBoardContent=this.location.href;  // 这个方法firefox会报错！IE适用
		window.clipboardData.setData("Text",clipBoardContent);
		alert("文章链接复制成功!");
   } 
</script>
</body>